<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>04.layui导航</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <!-- layui-container: 容器 -->
        <div class="layui-container">
            <!-- 导航，导航的本质是一个列表:ul(无序列表), ol(有序列表), li(列表项), 每一个item是一个链接, 否则显示很怪 -->
            <div class="layui-row">
                <!-- 水平导航, 只是文字 -->
                <ul class="layui-nav">
                    <li class="layui-nav-item">李白</li>
                    <li class="layui-nav-item">杜甫</li>
                    <li class="layui-nav-item">今夜大三浪</li>
                </ul>
            </div>

            <div class="layui-row">
                <!-- 水平导航, 每个子项目需要使用a标签 -->
                <ul class="layui-nav layui-bg-orange">
                    <!-- 加了一个小徽章badge -->
                    <li class="layui-nav-item"><a href="">李白<span class="layui-badge">3</span></a></li>
                    <li class="layui-nav-item"><a href="">杜甫</a></li>
                    <li class="layui-nav-item"><a href="">今夜大三浪</a></li>
                </ul>
            </div>

            <div class="layui-row">
                <!-- 水平导航, 测试了一下, 貌似不支持二级菜单之中再去嵌套 -->
                <ul class="layui-nav layui-bg-blue">
                    <!-- layui-this表示选中 -->
                    <li class="layui-nav-item layui-this"><a href="">李白</a></li>
                    <li class="layui-nav-item">
                        <a href="">杜甫</a>
                        <!-- 子导航模块, dd是二级导航, dl是子条目 -->
                        <dd class="layui-nav-child">
                            <dl><a href="">兵车行</a></dl>
                            <dl><a href="">春日思李白</a></dl>
                            <dl><a href="">茅屋为秋风所破歌</a></dl>
                            <dl><a href="">闻官军收河南河北</a></dl>
                        </dd>
                    </li>
                    <li class="layui-nav-item"><a href="">今夜大三浪</a></li>
                </ul>
            </div>

            <div class="layui-row">
                <!-- 面包屑导航 -->
                <span class="layui-breadcrumb">
                    <a href="">首页</a>
                    <a href="">国际新闻</a>
                    <a href="">亚太地区</a>
                    <a><cite>正文</cite></a>
                </span>
            </div>
            <hr/>
            <div class="layui-row">
                <!-- 面包屑导航, 设置分割符号 -->
                <span class="layui-breadcrumb" lay-separator="|||">
                    <a href="">首页</a>
                    <a href="">国际新闻</a>
                    <a href="">亚太地区</a>
                    <a><cite>正文</cite></a>
                </span>
            </div>

        </div>

        <!-- 容器外的导航 撑满宽度 -->
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">李白</a></li>
            <li class="layui-nav-item"><a href="">杜甫</a></li>
            <li class="layui-nav-item"><a href="">今夜大三浪</a></li>
        </ul>

        <hr/>

        <!-- 垂直导航 -->
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item"><a href="">李白</a></li>
            <li class="layui-nav-item">
                <a href="">杜甫</a>
                <dd class="layui-nav-child">
                    <dl><a href="">兵车行</a></dl>
                    <dl><a href="">春日思李白</a></dl>
                </dd>
            </li>
            <li class="layui-nav-item"><a href="">今夜大三浪</a></li>
        </ul>

        <!-- 侧边导航, 占满整个屏幕-->
        <!--            <div class="layui-row"> -->
        <!--                <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <!--                    <li class="layui-nav-item"><a href="">李白</a></li> -->
        <!--                    <li class="layui-nav-item"> -->
        <!--                        <a href="">杜甫</a> -->
        <!--                        <dd class="layui-nav-child"> -->
        <!--                            <dl><a href="">兵车行</a></dl> -->
        <!--                            <dl><a href="">春日思李白</a></dl> -->
        <!--                        </dd> -->
        <!--                    </li> -->
        <!--                    <li class="layui-nav-item"><a href="">今夜大三浪</a></li> -->
        <!--                </ul> -->
        <!--            </div> -->

        <hr/>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
            });
        </script>
    </body>
</html>
